<template>
  <div class="simple-editor">
    <!-- 工具栏：仅保留表情和图片按钮 -->
    <div class="toolbar">
      <!-- 表情按钮 -->
      <button @click="showEmoji = !showEmoji" class="tool-btn">
        😀
      </button>

      <!-- 图片上传按钮 -->
      <button @click="triggerImageUpload" class="tool-btn">
        📷
      </button>

      <!-- 隐藏的文件上传输入框 -->
      <input
        ref="fileInput"
        type="file"
        accept="image/*"
        class="file-input"
        @change="handleImageUpload"
      >
    </div>

    <!-- 表情选择面板 -->
    <div v-if="showEmoji" class="emoji-panel">
      <span
        class="emoji-item"
        v-for="emoji in emojis"
        :key="emoji"
        @click="insertEmoji(emoji)"
      >
        {{ emoji }}
      </span>
    </div>

    <!-- 输入区域（使用文本域模拟简单编辑器） -->
    <textarea
      ref="inputRef"
      v-model="inputContent"
      class="input-area"
      placeholder="输入消息..."
      :style="{ height: `${Math.max(60, inputHeight)}px` }"
      @input="adjustHeight"
      @keydown.enter="handleEnter"
    ></textarea>

    <!-- 底部：字数统计 + 发送按钮 -->
    <div class="footer">
      <span class="word-count">{{ inputContent.length }}/500</span>
      <button
        type = "button"
        class="send-btn"
        @click="handleSend"
        :disabled="!inputContent.trim()"
      >
        发送
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import useFileUpload from "@/utiles/common.js";

// 输入内容
const inputContent = ref('');
// 输入框高度（自适应）
const inputHeight = ref(60);
// 表情面板显示状态
const showEmoji = ref(false);
// 输入框和文件输入引用
const inputRef = ref(null);
const fileInput = ref(null);
// 定义事件（用于向父组件传递消息）
const emit = defineEmits(['send']);

// 图片上传工具初始化
const coverUpload = useFileUpload({
  endpoint: 'http://localhost:8081/common/upload',
  extraData: { type: 'chat' }, // 标记为聊天图片（与头像区分）
  maxSize: 5 * 1024 * 1024,    // 调整为5MB（与前端验证一致）
  allowedTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/jpg']
});

// 常用表情列表
const emojis = [
  '😀', '😂', '😍', '😢', '👍', '👎', '🎉', '❓', '🔥', '💯',
  '😊', '😎', '😭', '😡', '👏', '🙏', '✨', '🎁', '🤔', '😴',
];

// 调整输入框高度（自适应内容）
const adjustHeight = () => {
  nextTick(() => {
    if (inputRef.value) {
      // 重置高度以获取真实滚动高度
      inputRef.value.style.height = 'auto';
      // 最大高度限制为200px
      inputHeight.value = Math.min(inputRef.value.scrollHeight, 200);
    }
  });
};

// 插入表情
const insertEmoji = (emoji) => {
  inputContent.value += emoji;
  // 插入后关闭表情面板并调整高度
  showEmoji.value = false;
  adjustHeight();
};

// 触发图片上传
const triggerImageUpload = () => {
  if (fileInput.value) {
    fileInput.value.click(); // 触发隐藏的文件选择框
  }
};

// 处理图片上传（核心修正逻辑）
const handleImageUpload = async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  // 1. 前端基础验证
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请上传图片文件（支持jpg、png、gif格式）');
    return;
  }
  if (file.size > 5 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过5MB');
    return;
  }

  try {
    // 2. 显示上传中提示
    ElMessage({
      message: '图片上传中...',
      type: 'info',
      duration: 0,
      showClose: true
    });

    // 3. 调用上传工具上传图片
    const imageUrl = await coverUpload.upload(file);

    // 4. 上传成功后，向父组件发送图片消息
    emit('send', {
      type: 'image',
      content: imageUrl, // 传递图片URL
      fileName: file.name // 可选：传递文件名用于显示
    });

    ElMessage.success('图片上传成功');
  } catch (error) {
    console.error('图片上传失败:', error);
    ElMessage.error('图片上传失败，请重试');
  } finally {
    // 重置文件输入（允许重复上传同一张图片）
    if (fileInput.value) {
      fileInput.value.value = '';
    }
    // 关闭上传中提示
    ElMessage.closeAll();
  }
};

// 处理发送（支持文本消息）
const handleSend = () => {
  const content = inputContent.value.trim();
  if (!content) return;

  // 向父组件发送文本消息
  emit('send', {
    type: 'text',
    content: content
  });

  // 清空输入框并重置高度
  nextTick(() => {
    inputContent.value = '';
    inputHeight.value = 60;
  });
};

// 处理回车键发送（按住Shift可换行）
const handleEnter = (e) => {
  if (!e.shiftKey) {
    e.preventDefault(); // 阻止默认换行
    handleSend();
  } else {
    // 按住Shift键时正常换行，延迟调整高度
    setTimeout(adjustHeight, 0);
  }
};

// 暴露清空内容方法给父组件
defineExpose({
  clearContent: () => {
    inputContent.value = '';
    inputHeight.value = 60;
  }
});
</script>

<style scoped>
.simple-editor {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

/* 工具栏 */
.toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.tool-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 4px;
  background: #f5f7fa;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.tool-btn:hover {
  background: #e5e7eb;
}

/* 表情面板 */
.emoji-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fff;
}

.emoji-item {
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.emoji-item:hover {
  background: #f5f7fa;
}

/* 输入区域 */
.input-area {
  width: 95%;
  border: none; /* 移除边框 */
  padding: 10px;
  resize: none;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  transition: border 0.2s;
}

.input-area:focus {
  border-color: #409eff;
}

/* 底部区域 */
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.word-count {
  font-size: 12px;
  color: #9ca3af;
}

.send-btn {
  padding: 6px 16px;
  background: #409eff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.send-btn:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}

.send-btn:not(:disabled):hover {
  background: #3088e6;
}

/* 隐藏文件输入框 */
.file-input {
  display: none;
}
</style>
